<template>
	<view class="home">
		<image class="bg-img" v-if="config_info.bg_img" :src="$imgUrl + config_info.bg_img" mode="widthFix"></image>
		<mx-navbar background="trasparent" :config_info="config_info">
			<template #left>
				<view class="cu-bar search" :style="{'margin-right': `${$jn_width}px`}" :class="{ 'bg-white': is_head_bg && (!config_info.bg_img) }">
					<image class="logo" src="/static/logo.png"></image>
					<view class="search-form round" @click="$go('/pages/search/index')">
						<text class="cuIcon-search"></text>
						<text class="stxt">输入搜索的关键词</text>
					</view>
				</view>
			</template>
		</mx-navbar>

		<view class="pbody">
			<mx-page v-model="pn" :page_data="page_data" :keys="'home'"
				v-if="page_data && page_data.length > 0"></mx-page>
		</view>
		<mx-special v-model="pn" :scroll_top="sh"></mx-special>
		<mx-homelogin></mx-homelogin>

		<!-- <mx-dialog :list="dailog_list" v-if="dailog_list.length>0"></mx-dialog> -->
	</view>
</template>

<script setup>
const {
	proxy
} = getCurrentInstance()

const data = reactive({
	is_head_bg: false,
	config_info: {
		bg_img: ''
	},
	page_data: [],

	pn: 1,
	sh: 0
})
const {
	is_head_bg, config_info, pn, page_data, sh
} = toRefs(data)

onLoad(() => {
	getData()
})


onPageScroll((e) => {
	data.is_head_bg = e.scrollTop > 240
})

async function getData() {
	let res = await proxy.$api('Page', {
		key: 'home'
	})
	if (res.code == 0) {
		if (res.data && res.data.length > 0) {
			data.config_info = res.data[0]
		}
		data.page_data = res.data || []
		proxy.$nextTick(() => {
			setTimeout(() => {
				getContentHeight()
			}, 500);
		})
	}
}


function getContentHeight() {
	const query = uni.createSelectorQuery().in(proxy)
	query
		.select(`.pbody`)
		.boundingClientRect((res) => {
			data.sh = (res && res.height)
		})
		.exec()
}


onReachBottom(() => {
	data.pn += 1
})


onShareAppMessage(() => {

})
onShareTimeline(() => { })
</script>

<style lang="scss" scoped>
.search {
	width: 100%;
	display: flex;
	// #ifdef MP
	margin-right: 180rpx;

	// #endif
	.logo {
		margin-left: 24rpx;
		width: 70rpx;
		height: 70rpx;
		border-radius: 16rpx;
	}

	.stxt {
		font-size: 24rpx;
	}
}


.home {
	min-height: 100vh;
	background: #f3f9ff;
	position: relative;

	.bg-img {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.pbody {
		position: relative;
		z-index: 2;
	}
}
</style>